
<div class="row fullPage">

  <!-- Configure part -->
  <div *ngIf="!isConfigured" class="col-12 mt-4">

    <ng-container *ngIf="isLoadingKey">
      <app-loading-skeleton
        amount="5"
        colClass="col-12 mb-3"
        blockHeight="45px"
        hasShadow="false">
      </app-loading-skeleton>
    </ng-container>

    <ng-container *ngIf="!isLoadingKey">
      <div class="row ms-1">
        <div class="col-12">
          <h3 class="fw-bold mb-2">Machine Learning</h3>
          <p class="text-muted">
            To get started with Machine Learning you'll need an OpenAI API key.
            Get your API key <a href="https://beta.openai.com/account/api-keys" target="_blank">here</a>.
          </p>

          <button
            (click)="configure()"
            class="mt-2"
            mat-flat-button>
            <div class="d-flex flex-nowrap align-items-center ps-1">
              <mat-icon>key</mat-icon>
              <p class="my-0 mx-2 text-truncate url-text">OpenAI API key</p>
            </div>
          </button>

        </div>
      </div>
    </ng-container>

  </div>

  <div class="col-12 mt-4" *ngIf="isConfigured">

    <div class="row align-items-center me-1">

      <div class="col-lg-5 col-12 mb-lg-0 mb-2">
        <h3 class="fw-bold mb-2">
          Machine Learning types
        </h3>
        <p class="text-muted">
          These are your Machine Learning types that you can configure and train specifically to solve your problems
        </p>
      </div>

      <div class="col-lg-7 col-12">

        <!-- Search textbox -->
        <app-filter
          (filterList)="filterList($event)"
          buttonText="Add"
          (buttonClick)="addType()">
        </app-filter>

      </div>

      <div class="table-responsive mt-4 col-12">

        <table
          mat-table
          [dataSource]="types"
          matSort
          class="w-100 borderless hoverable"
          (matSortChange)="sortData($event)">

          <!-- Type column -->
          <ng-container matColumnDef="type">
            <th
              mat-header-cell
              *matHeaderCellDef
              class="text-nowrap px-sm-3"
              mat-sort-header>
              Type
            </th>
            <td
              mat-cell
              *matCellDef="let element"
              class="text-truncate px-sm-3">
              {{element.type}}
            </td>
          </ng-container>

          <!-- Vectorise model column -->
          <ng-container matColumnDef="vector_model">
            <th
              mat-header-cell
              *matHeaderCellDef
              class="pe-sm-3 text-nowrap small-table-column"
              mat-sort-header>
              Vector model
            </th>
            <td
              mat-cell
              *matCellDef="let element"
              class="pe-sm-3 text-nowrap small-table-column">
              {{element.vector_model}}
            </td>
          </ng-container>

          <!-- Model column -->
          <ng-container matColumnDef="model">
            <th
              mat-header-cell
              *matHeaderCellDef
              class="pe-sm-3 text-nowrap small-table-column"
              mat-sort-header>
              Model
            </th>
            <td
              mat-cell
              *matCellDef="let element"
              class="pe-sm-3 text-nowrap small-table-column">
              {{element.model}}
            </td>
          </ng-container>

          <!-- Actions column -->
          <ng-container matColumnDef="action">
            <th
              mat-header-cell
              *matHeaderCellDef
              class="ps-sm-3 small-table-column">
              Actions
            </th>
            <td
              mat-cell
              *matCellDef="let element"
              class="ps-sm-3 text-nowrap small-table-column">

              <button
                mat-button
                color="primary"
                (click)="import(element)">
                Import
              </button>

              <button
                mat-button
                color="primary"
                (click)="vectorise(element)">
                Vectorise
              </button>

              <button
                mat-button
                color="primary"
                (click)="test(element)">
                Test
              </button>

              <button
                mat-button
                color="primary"
                (click)="embed(element)">
                Embed
              </button>
        
              <button
                mat-button
                color="primary"
                (click)="edit(element)">
                Configure
              </button>

              <button
                mat-button
                color="primary"
                (click)="train(element)">
                Train
              </button>

              <button
                mat-button
                color="warn"
                (click)="delete(element)">
                Delete
              </button>

            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

        </table>

      </div>

    </div>

    <!-- Pager -->
    <mat-paginator
      [length]="count"
      [pageIndex]="filter.offset / filter.limit"
      [pageSize]="filter.limit"
      (page)="page($event)">
    </mat-paginator>

  </div>

</div>
